<!-- 
  招聘中心-企业搜索
 -->
<template>
  <div class="search">
    <img src="@/assets/images/search-icon.png" alt="" class="search-icon" />
    <el-cascader
      v-model="qureyParams.city"
      style="width: 150px; margin-right: 13px; font-size: 14px"
      :show-all-levels="false"
      :options="provinceAndCityData"
      :props="{ value: 'label' }"
      @change="handleCityChange"
      size="mini"
      placeholder="请选择城市"
      clearable
    ></el-cascader>
    <!-- <el-cascader
      v-model="qureyParams.industry"
      style="width: 150px; margin-right: 14px"
      :show-all-levels="false"
      :options="AreaOption"
      :props="{ value: 'label' }"
      @change="handleAreaChange"
      size="mini"
      placeholder="行业类型"
      clearable
    ></el-cascader> -->

    <el-cascader
      style="min-width: 150px; margin-right: 13px"
      v-model="qureyParams.industry"
      :options="AreaOption"
      collapse-tags
      size="mini"
      :props="{ multiple: true }"
      placeholder="行业类型"
      clearable
    ></el-cascader>
    <el-input
      placeholder="请输入关键词"
      prefix-icon="el-icon-search"
      v-model="qureyParams.key"
      style="width: 260px; margin-right: 15px"
    >
    </el-input>
    <el-button size="mini" type="primary" @click="sumitFun">搜索</el-button>
    <el-button
      size="mini"
      style="font-size: 15px; color: #3d6cb0"
      type="text"
      @click="clearCondition"
      >清空筛选条件</el-button
    >
  </div>
 
</template>

<script>
import {
  provinceAndCityData,
  studentType,
  educationOptions,
  workLanguage,
  AreaOption,
} from "@/utils/frontDataDict.js";

export default {
  // 组件名称
  name: "search",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      AreaOption: AreaOption,
      workLanguage: workLanguage,
      studentType: studentType,
      provinceAndCityData: provinceAndCityData,
      educationOptions: educationOptions,
      props: { multiple: false }, // 学历要求多选
      options: [{ key: "1", value: "全国" }],
      qureyParams: {
        city: [],
        industry: [],
        key: "",
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    setOption(key, value) {
      this.$set(this.qureyParams, key, value);
    },
    // 重置
    clearCondition() {
      this.qureyParams.city = "";
      this.qureyParams.industry = [];
      this.qureyParams.key = "";
      this.$parent.searchFun({
        companyAddres: "",
        industry: '',
        companyName: "",
      });
    },
    handleCityChange(data) {},
    sumitFun() {
      let industry = [
        ...new Set(
          this.qureyParams.industry.map((item) => JSON.stringify(item))
        ),
      ];
      let data = {
        companyAddres: "",
        industry,
        companyName: this.qureyParams.key,
      };
      if (this.qureyParams.city.length > 0) {
        data.companyAddres = this.qureyParams.city[1];
      }
      // if (this.qureyParams.industry.length > 0) {
      //   data.industry = this.qureyParams.industry[1];
      // }
      this.$parent.searchFun(data);
    },
    handleAreaChange(data) {},
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    console.log('this.qureyParams',this.qureyParams);
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  padding-left: 30px;
  position: relative;
  .search-icon {
    width: 18px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 10px;
  }
  .search-select {
    width: 160px;
    margin-right: 13px;
  }
}
#app .el-input--prefix .el-input__inner {
  width: 100% !important;
}
.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  border: none;
}
.mr13 {
  margin-right: 13px;
}

@media screen and (max-width: 480px) {
  .search {
    // display: none;
  }
}
</style>
